<template>
  <div class="top-menu">
    <el-menu  :default-active="activeIndex" mode="horizontal" text-color="#333">
      <template v-for="(item, index) in menulist">
        <el-menu-item
          :index="item.parentId + ''"
          :key="index"
          @click.native="openMenu(item, item)"
          style="height: 55px; line-height: 55px"
        >
          <template slot="title">
            <i :class="item.icon" />
            <span>{{ item.label }}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getMenu } from "@/api/admin/menu";

export default {
  name: "TopMenu",
  inject: ["Index"],
  data() {
    return {
      activeIndex: "0",
      items: [],
      menulist: [],
    };
  },
  created() {
    // 显示顶部菜单
    this.getTopMenu();
    // 用户权限加载
    this.getUserInfo();
  },
  computed: {
    ...mapGetters(["tagWel", "menu"]),
  },
  methods: {
    getTopMenu() {
      this.$store.dispatch("GetTopMenu").then((res) => {
        this.items = res;
      });
      getMenu().then((res) => {
        this.menulist = res.data.data;
      });
    },
    openMenu(item, info) {
      this.Index.openMenu(item);
      this.$store.commit("DEL_ALL_TAG");
      let path = info.children[0];
      let parentId = path.parentId;
      sessionStorage.setItem("parentId", parentId);
      this.$store
        .dispatch("GetMenu", { type: true, id: parentId })
        .then((data) => {
          if (data.length !== 0) {
            this.$router.$avueRouter.formatRoutes(data, true);
            this.$router
              .push({
                path: this.$router.$avueRouter.getPath({
                  name: path.label,
                  src: path.path,
                }),
              })
              .catch(() => {});
          }
        });
    },
    getUserInfo() {
      // 更新sessionStore 权限信息
      this.$store.dispatch("GetUserInfo");
    },
  },
};
</script>
